<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-find-news">
    <template>
        <style include="shop-common-styles">
            :host{
                padding: 10px;
                display: block;
                background-color: #eee;
            }
            .item{
                background-color: #fff;
                border-radius: 7px;
                margin: 10px auto;
                padding: 10px;
            }
            .item p{
                margin: 0px;
                padding: 0px;
            }
            .pic img{
                width: 100%;
            }
            .info{
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 50px;
            }
            .info span:first-of-type{
                font-size: 18px;
                font-weight: bold;
            }
            .info span:last-of-type{
                font-size: 12px;
                color: #666;
            }
            a{
                color: #444;
                text-decoration: none;
            }
            paper-listbox{
                background-color: transparent;
            }
        </style>
        <plugin-xhr id="xhr_news" url="[[app.apiHost]]/product.news.week?app_id=[[app.appId]]" response="{{news}}"></plugin-xhr>
        <header>
            <h1>本周新品</h1>
            <span>[[news.result.length]]款</span>
        </header>
        <paper-listbox>
            <template is="dom-repeat" items="[[news.result]]" as="product">
                <div class="item">
                    <p class="pic"><a href="{{rootPath}}product-detail/{{product.id}}"><img src="[[_albumItem(product.album,0,550,550)]]"/></a></p>
                    <p class="info">
                        <span><a href="{{rootPath}}product-detail/{{product.id}}">[[product.name]]</a></span>
                    <span>[[_date(product.createtime)]]</span>
                    </p>
                </div>
            </template>
        </paper-listbox>
    </template>

    <script>
        class ShopFindNews extends PluginElement {

            static get is() {
                return 'shop-find-news';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            ready(){
                super.ready();
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="find-news"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.xhr_news.get();
                }
            }
        }

        customElements.define(ShopFindNews.is, ShopFindNews);

    </script>

</dom-module>
